import { createApp } from 'vue'
import LoadingComponent from '../../loading/index.vue'

export default {
  install(app) {
    // 存储所有 Loading 实例
    const loadingInstances = new Map()

    // 添加 show 和 hide 方法到 app.config.globalProperties
    app.config.globalProperties.$loading = {
      show(el) {
        const elmentObject = el.$el || el
        // 如果已经存在该 DOM 的 Loading 实例，则不再重复创建
        if (loadingInstances.has(elmentObject)) return
        // 创建一个新的 Loading 实例
        elmentObject.classList.add('loading-parent')
        const div = document.createElement('div')
        elmentObject.appendChild(div)

        const instance = createApp(LoadingComponent).mount(div)
        instance.show(elmentObject)

        // 将实例存储到 Map 中
        loadingInstances.set(elmentObject, {
          instance,
          dom: div
        })
      },
      hide(el) {
        const elmentObject = el.$el || el
        if (!loadingInstances.has(elmentObject)) return
        // 删除 Loading 实例
        elmentObject.classList.remove('loading-parent')
        // 获取对应的 Loading 实例
        const { instance, dom } = loadingInstances.get(elmentObject)

        // 隐藏并销毁实例
        instance.hide()

        // 移除 DOM
        dom.remove()
        loadingInstances.delete(elmentObject)
      }
    }
  }
}
